<template>
  <!-- <div v-show="true">{{ tempDate }}</div> -->
  <div class="flight-board">
    <div class="btn" style="margin-left:0" @click="backward">&lt;</div>
    <div
      v-for="(day, key) in days"
      :key="key"
      :class="{ isActive: day.active }"
      @click="chooseDay(key)"
    >
      {{ day.date.toLocaleDateString() }}
    </div>
    <div class="btn" style="margin-right:0" @click="forward">&gt;</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, Ref } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'SevenDatePicker',
  props: {
    tempDate: {
      type: Date,
      default: new Date(),
    },
  },
  setup(props, context) {
    const store = useStore();
    // const departureDate = ref(store.state.departureDate);
    const addDate = (dateTime: Date, num: number) => {
      let date = new Date(dateTime);
      let time = date.setDate(date.getDate() + num);
      console.log(new Date(time));
      return new Date(time);
    };
    const subDate = (dateTime: Date, num: number) => {
      let date = new Date(dateTime);
      let time = date.setDate(date.getDate() - num);
      console.log(new Date(time));
      return new Date(time);
    };
    const days = ref([
      { date: subDate(props.tempDate, 2), active: false },
      { date: subDate(props.tempDate, 1), active: false },
      { date: props.tempDate, active: true },
      { date: addDate(props.tempDate, 1), active: false },
      { date: addDate(props.tempDate, 2), active: false },
      { date: addDate(props.tempDate, 3), active: false },
      { date: addDate(props.tempDate, 4), active: false },
    ]);
    // const forward = () => {
    //   for (let i = 0; i < 7; i++) {
    //     let a = days.value[i].date.split('-');
    //     days.value[i].date = a[0] + '-' + a[1] + '-' + a[2];
    //     console.log('days.value[i].date: ', days.value[i].date);
    //   }
    // };
    const forward = () => {
      for (let i = 0; i < 7; i++) {
        days.value[i].date = new Date(
          days.value[i].date.setDate(days.value[i].date.getDate() + 7)
        );
      }
    };
    const backward = () => {
      for (let i = 0; i < 7; i++) {
        days.value[i].date = new Date(
          days.value[i].date.setDate(days.value[i].date.getDate() - 7)
        );
      }
    };
    const chooseDay = (key: any) => {
      for (let i = 0; i < 7; i++) {
        days.value[i].active = false;
      }
      days.value[key].active = true;
      // console.log(days.value[key].date);
      context.emit('changeDate', days.value[key].date);
      context.emit('reload');
      context.emit('getList');
    };
    return {
      days,
      forward,
      backward,
      chooseDay,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
$height: 65px;
$width: 1050px;
.flight-board {
  margin: -40px auto 50px;
  width: $width;
  height: $height;
  line-height: $height;
  background-color: #ebf0f3;
  border-radius: 16px;
  // border-top: 5px solid #cfdee8;
  // border: 1px solid #999;
  div {
    cursor: pointer;
    width: 125px;
    margin: 0 8px;
    float: left;
    border-radius: 3px;
    background: #fff;
    box-shadow: 1px 1px 3px #b0bdc5, -1px -1px 3px #eeffff;
    &.btn {
      color: white;
      // border-radius: 40px;
      background: linear-gradient(145deg, #5379aa, #758eaf);
      box-shadow: 1px 1px 1px #2f496c, -1px -1px 1px #5d91d6;
      width: 23px;
    }
    &:hover {
      background-color: #ccd4e4;
    }
    &.isActive {
      background: #5379aa;
      color: white;
    }
  }
}
</style>
